<template>
	<view class="content">
		<view :class="isshare?'share':''" @touchmove.stop.prevent>
		</view>
		<view class="neirong">
			<view class="from">
				<view class="list">
					<view class="left">收货人:</view>
					<view class="right"><input  placeholder-style="color:#ccc" placeholder="请输入收货人姓名" type="text" v-model="from.real_name" /></view>
				</view>
				<view class="list">
					<view class="left">联系电话:</view>
					<view class="right"><input  placeholder-style="color:#ccc" placeholder="请输入收货人联系电话" class="number" v-model="from.phone" /></view>
				</view>
				<view class="list">
					<view class="left">所属地址:</view>
					<view class="right" @click="ispopul=true,isshare=true">
						<view class="" :class="from.address==''?'kone':''">{{from.address==''?'请选择收货地址':from.address}}</view>
						<view class="region-box" v-if="ispopul">
							<picker-view @change="bindChange" :indicator-style="indicatorStyle">
								<picker-view-column>
									<view  class="center" v-for="(item, index) in regionList" :key="index">
										{{ item.name }}
									</view>
								</picker-view-column>
								<picker-view-column v-if="regionList[region[0]]">
									<view class="center" v-for="(item, index) in regionList[region[0]].city"
										:key="index">
										{{ item.name }}
									</view>
								</picker-view-column>
								<picker-view-column v-if="regionList[region[0]]">
									<view  class="center"
										v-for="(item, index) in regionList[region[0]].city[region[1]].area"
										:key="index">
										{{ item }}
									</view>
								</picker-view-column>
							</picker-view>

							<view style="width: 100%;" class="btn-Block center">
								<view class="btn-left center" @click.stop="ispopul=false,isshare=false">取消</view>
								<view class="btn-right center" @click.stop="onSubmit">确定</view>
							</view>
						</view>
						<!-- <picker mode="region" @change="chooseregion"><input class="uni-input" v-model="from.address" disabled placeholder="请选择区域" /></picker> -->
					</view>
				</view>
				<view class="textarea">
					<view class="left">详细地址:</view>
					<view class="right">
						<view class="uni-textarea"><textarea  placeholder-style="color:#ccc" style="height: 150rpx;"
								placeholder="请输入详细地址" maxlength="150" v-model="from.detail" /></view>
					</view>
				</view>
				<!-- <view class="biaoqian">
					<view class="title">
						设置标签:
					</view>
					<view class="list">
						<view :class="title_index==index?'list_icons':'list_icon'" v-for="(item,index) in title"
							:key="index" @click="titles(item,index)">
							{{item}}
						</view>
					</view>
				</view> -->
			</view>
		</view>
		<view class="defaddress">
			<view class="contents">
				<view class="left">设为默认地址</view>
				<view class="right">
					<switch v-if="from.is_default == 1" @change="switch2Change" checked="true" />
					<switch v-else @change="switch2Change" />
				</view>
			</view>
		</view>
		<view class="reset" v-if="!visible" @click="tj">确定</view>

		<!-- <picker-view v-if="visible" :value="value" @change="bindChange" class="picker-view">
			<picker-view-column>
				<view class="item" v-for="(item,index) in province" :key="index">{{item.regionName}}</view>
			</picker-view-column>
			<picker-view-column>
				<view class="item" v-for="(item,index) in city" :key="index">{{item.regionName}}</view>
			</picker-view-column>
			<picker-view-column>
				<view class="item" v-for="(item,index) in area" :key="index">{{item.regionName}}</view>
			</picker-view-column>
		</picker-view> -->
		<!-- <view class="close" v-if="visible">
			<view class="left" @click="close">
				取消
			</view>
			<view class="right" @click="sure">
				确定
			</view>
		</view> -->
	</view>
</template>

<script>
	import {
		saveAddress
	} from '@/api/api.js';
	import datas from '@/utils/person.json'
	export default {
		components: {},
		data() {
			return {
				indicatorStyle: `height: 60px;`,
				ispopul:false,
				isshare:false,
				value: [0, 0, 0],
				region: [0, 0, 0], //地址每列的index
				regionList: [], //地址数据，格式为 三级地址全返回
				address: '',
				// province: [], //省
				// city: [], //市
				// area: [], //区
				visible: false,
				// 判断选中了谁
				// title_index: 99,
				list_icons: 'list_icons',
				list_icon: 'list_icon',
				title: ['家', '公司', '学校', '其他'],
				from: {
					real_name: '', //收货人姓名
					phone: '', //	手机号
					detail: '', //详细地址
					provinceId: '', //省
					cityId: '', //市
					areaId: '', //	区
					label: '', //标签
					userId: '', //用户ID
					id: '', //地址id，为0表示新增，反之为修改
					is_default: 0, //默认地址为1 普通为0,
					address: '' //省市区名字
				},
				birthday: ''
			};
		},
		onLoad(options) {
			this.regionList = datas
			if (options.id) {
				this.from.id = options.id;
				uni.setNavigationBarTitle({
					title: '添加地址'
				});
			} else {
				this.from = JSON.parse(options.data);
				this.from.address = this.from.province + ',' + this.from.city + ',' + this.from.district;
				// this.from.address = this.from.address.join(',')

				// if(this.from.label=='家'){
				// 	this.title_index = 0
				// }else if(this.from.label=='公司'){
				// 	this.title_index = 1
				// }else if(this.from.label=='学校'){
				// 	this.title_index = 2
				// }else if(this.from.label=='其他'){
				// 	this.title_index =3
				// }
				uni.setNavigationBarTitle({
					title: '修改地址'
				});
			}
			this.from.userId = uni.getStorageSync('userId');
			// this.Provinces()
		},
		methods: {
			
			//选择值改变事件
			bindChange(e) {
				// 用于对比滑动的是哪一列数据
				const val = e.detail.value
				if (this.region[0] !== val[0]) {
					// 如果滑动的是第一列数据，让二三列恢复到0
					this.region = [val[0], 0, 0]
				} else if (this.region[1] !== val[1]) {
					// 滑动的是第二列数据
					this.region = [val[0], val[1], 0]
				} else {
					this.region = e.detail.value;
				}
			},
			//确定按钮操作
			onSubmit() {
				this.from.address = this.regionList[this.region[0]].name + ',' + this.regionList[this.region[0]]
					.city[this.region[1]].name + ',' + this.regionList[this.region[0]].city[this.region[1]]
					.area[this.region[2]]
					this.ispopul = false
					this.isshare = false
			},
			// onCancel() {
			// 	// 调用父组件方法关闭
			// 	this.$emit('onCancel')
			// },		
			// 地址选择
			chooseregion(event) {
				// this.from.address = event.detail.value.toString();
				// this.addressCn = event.detail.value.toString();
				// this.s = event.detail.value[0];
				// this.ss = event.detail.value[1];
				// this.q = event.detail.value[2];
				// this.id = event.detail.code;
				// this.from.provinceId = this.id[0];
				// this.from.cityId = this.id[1];
				// this.from.areaId = this.id[2];
			},
			switch2Change: function(e) {
				if (e.detail.value == true) {
					this.from.is_default = 1;
				} else {
					this.from.is_default = 0;
				}
			},
			// bindChange: function(e) {
			// 	let value = e.detail.value;
			// 	this.value = value;
			// 	this.city = this.province[value[0]].city;
			// 	this.area = this.city[value[1]].city;
			// },
			// 提交
			tj() {
				let myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
				if (this.from.real_name == '')
					return uni.showToast({
						title: '请填写姓名',
						icon: 'error'
					});
				if (this.from.phone == '')
					return uni.showToast({
						title: '请填写手机号',
						icon: 'error'
					});
				if (!myreg.test(this.from.phone))
					return uni.showToast({
						title: '请填写正确手机号',
						icon: 'error'
					});
				if (this.from.address == '')
					return uni.showToast({
						title: '请选择地址',
						icon: 'error'
					});
				if (this.from.detail == '')
					return uni.showToast({
						title: '请填写详细地址',
						icon: 'error'
					});
				// if(this.from.label=='') return uni.showToast({title: '请选择标签',icon:'error'});
				this.saveAddressBook();
			},
			// 获取省市区信息
			Provinces() {
				Provinces().then(res => {
					this.province = res.data.data;
					this.city = this.province[0].city;
					this.area = this.city[0].city;
				});
			},
			//标签
			// titles(item, index) {
			// 	console.log(item)
			// 	this.from.label = item
			// 	this.title_index = index
			// },
			// 地址选择
			sure() {
				this.visible = false;
				// this.birthday =
				// 	`${this.province[this.value[0]].regionName}-${this.city[this.value[1]].regionName}-${this.area[this.value[2]].regionName}`
				// console.log(this.province[this.value[0]].id,this.city[this.value[1]].id,this.area[this.value[2]].id)
				/* 提交的省市区名字 */
				this.from.addressName =
					`${this.province[this.value[0]].regionName},${this.city[this.value[1]].regionName},${this.area[this.value[2]].regionName}`;
				// 省市区赋值
				this.from.provinceId = this.province[this.value[0]].id;
				this.from.cityId = this.city[this.value[1]].id;
				this.from.areaId = this.area[this.value[2]].id;
			},
			openvisible() {
				this.visible = true;
			},
			close() {
				this.visible = false;
			},
			// 添加修改地址id=0新增 1修改
			saveAddressBook() {
				console.log(this.from.id);
				this.from.address = this.from.address.split(',');
				this.from.address = JSON.stringify(this.from.address);
				// this.from.address = this.from.address.split(',')
				let data = this.from;
				if (this.from.id == 0) {
					saveAddress(data).then(res => {
						if (res.data.code == '200') {
							uni.showToast({
								title: '添加成功',
								duration: 1000
							});
							let time = setTimeout(()=>{
								uni.navigateBack({
									data:1
								})
							},800)
						} else {
							uni.showToast({
								title: '添加失败',
								duration: 1000
							});
						}
					});
				} else {
					saveAddress(data).then(res => {
						if(res.data.code == '200'){
							uni.showToast({
								title: '修改成功',
								duration: 1000
							});
							let time = setTimeout(()=>{
								uni.navigateBack({
									data:1
								})
							},800)
						}else {
							uni.showToast({
								title: res.data.msg,
								duration: 1000
							});
						}
						
					});
				}
			}
		}
	};
</script>

<style lang="scss">
	.share {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 500;
	}
	.content {
		width: 100vw;
		height: 100vh;
		position: relative;
		background-color: rgb(246, 246, 246);
		overflow: hidden;

		.picker-view {
			width: 750rpx;
			height: 600rpx;
			position: fixed;
			bottom: 0rpx;
			left: 0;
			z-index: 99999;
		}

		.close {
			width: 100%;
			height: 100rpx;
			position: fixed;
			bottom: 600rpx;
			left: 0;
			display: flex;
			align-items: center;
			background-color: #fff;
			box-sizing: border-box;
			padding: 0 90rpx;

			.left {
				flex: 1;
				color: rgb(158, 158, 158);
				line-height: 100rpx;
				text-align: left;
			}

			.right {
				flex: 1;
				color: rgb(0, 122, 255);
				line-height: 100rpx;
				text-align: right;
			}
		}

		.item {
			height: 50px;
			align-items: center;
			justify-content: center;
			text-align: center;
		}

		.neirong {
			width: 100%;
			height: 600rpx;
			background-color: #fff;
			overflow: hidden;

			.from {
				width: 100%;
				height: 494rpx;
				font-size: 28rpx;
				.list {
					width: 100%;
					height: 98rpx;
					border-top: 1rpx solid rgb(244, 244, 244);
					display: flex;
					align-items: center;

					.left {
						width: 140rpx;
						height: 70rpx;
						line-height: 70rpx;
						font-size: 26rpx;
						text-align: left;
						margin-left: 20rpx;
					}

					.right {
						width: 500rpx;
						height: 70rpx;
						line-height: 70rpx;
						input {
							width: 500rpx;
							height: 50rpx;
							margin-top: 10rpx;
							text-align: left;
						}
					}
				}

				.textarea {
					width: 100%;
					height: 180rpx;
					border-top: 1rpx solid rgb(244, 244, 244);
					display: flex;

					.left {
						width: 140rpx;
						height: 30rpx;
						line-height: 30rpx;
						font-size: 26rpx;
						text-align: left;
						margin-left: 20rpx;
						margin-top: 30rpx;
					}

					.right {
						width: 580rpx;
						height: 150rpx;
						font-size: 24rpx;
						margin-top: 30rpx;
					}
				}
			}

			.biaoqian {
				width: 100%;
				height: 100rpx;
				border-top: 1rpx solid rgb(244, 244, 244);
				display: flex;
				align-items: center;

				.title {
					width: 140rpx;
					height: 100rpx;
					line-height: 100rpx;
					font-size: 26rpx;
					text-align: left;
					margin-left: 20rpx;
				}

				.list {
					width: 500rpx;
					height: 70rpx;
					border-top: 0rpx solid rgba(0, 0, 0, 0);

					.list_icon {
						width: 80rpx;
						height: 40rpx;
						border: 1rpx solid rgb(215, 215, 215);
						margin-left: 20rpx;
						color: #000;
						font-size: 24rpx;
						text-align: center;
						line-height: 40rpx;
					}

					.list_icons {
						width: 80rpx;
						height: 40rpx;
						border: 1rpx solid blue;
						margin-left: 20rpx;
						color: #000;
						font-size: 24rpx;
						text-align: center;
						line-height: 40rpx;
					}
				}
			}
		}

		.defaddress {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			background-color: #fff;
			margin-top: 20rpx;

			.contents {
				width: 710rpx;
				margin: 0 auto;
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.left {
					width: 200rpx;
					height: 80rpx;
					line-height: 80rpx;
					font-size: 28rpx;
					color: #000;
					text-align: left;
				}

				.right {
					width: 140rpx;
					height: 80rpx;
					line-height: 80rpx;
				}
			}
		}

		.reset {
			width: 680rpx;
			height: 80rpx;
			line-height: 80rpx;
			color: #fff;
			font-size: 28rpx;
			font-weight: 600;
			background-color: #289958;
			border-radius: 4rpx;
			text-align: center;
			// line-height: 90rpx;
			z-index: 1;
			border-radius: 50rpx;
			margin: 150rpx auto 0;
		}
	}

	.uni-input {
		font-size: 28rpx;
	}
	.region-box {
		width: 100vw;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #FFFFFF;
		z-index: 10000;
		border-radius: 20rpx !important;
		.center {
			display: flex;
			justify-content: center;
			align-items: center;
		}
	
		.btn-Block {
			width: 100%;
			background-color: #FFFFFF;
			padding: 25rpx;
			height: 230rpx;
	
			.btn-left {
				width: 250rpx;
				height: 80rpx;
				border-radius: 10rpx;
				color: #54ba78;
				background-color: rgba(153, 153, 153, 0.2);
				margin-right: 30rpx;
			}
	
			.btn-right {
				width: 250rpx;
				height: 80rpx;
				border-radius: 10rpx;
				color: #FFFFFF;
				background-color: #54ba78;
			}
		}
	
		.picker-view {
			background-color: #FFFEFD;
			border-radius: 20rpx !important;
		}
	
		picker-view {
			width: 100%;
			height: 600rpx;
			animation: move 0.35s;
			border-radius: 20rpx !important;
			font-size: 30rpx;
			picker-view-column {
				width: 250rpx !important;
			}
		}
	}
	.kone {
		color: #ccc;
	}
	@keyframes move {
		0% {
			height: 0;
		}
		100% {
			height: 600rpx;
		}
	}
</style>
